<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>宣和艺网-共享艺术服务平台</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/public.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/jquery.bxslider.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/style.css}"/>
    <script type="text/javascript" th:src="@{/js/mobile/jquery1.11.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/jquery.bxslider.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/index.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/redirectPc.js}"></script>
    <script type="text/javascript" th:src="@{/js/baiduhm.js}" ></script>

</head>

<body>
<!--手机搜索begin-->
<div id="nav-search">

</div>
<div class="drawer-section search_div">
    <div class="search_con">
        <form action="" style="width: 100%;height: 100%;">
            <input name="names" type="text" class="input1" value="搜索" onFocus="if(value=='搜索'){value=''}"
                   onBlur="if(value==''){value='搜索'}"/>
            <input type="submit" value="" class="bnt1"/>
        </form>
    </div>
</div>
<!--top-->
<div id="top">
    <div class="wrap clearfloat">
        <div th:replace="~{mobile/component/header :: index_menu}"></div>


    </div>
    <div class="muen1" style="right: 56px;"><span class="muenX"></span> <span class="muenY">
        <img class="img1" th:src="@{/images/mobile/search_image.png}"/>
      </span> <span class="muenZ"></span></div>
    <div class="muen"><span class="muenX"></span> <span class="muenY"></span> <span class="muenZ"></span></div>
</div>
<!--/top-->

<!--main-->
<div class="main">
    <div class="banner">
        <ul class="slider1">
            <li th:each="banner:${banners}">
                <a href="">
                    <img class="img1" th:src="${banner.url}"/>
                    <img class="img2" th:src="${banner.url}"/>
                </a>
            </li>

        </ul>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            // 选取所有 class 为 event-content 的元素并遍历
            $('.event-content').each(function () {
                var content = $(this).text();
                // 检查内容长度是否超过 100 个字符
                if (content.length > 100) {
                    // 截取前 100 个字符并添加省略号
                    var shortContent = content.slice(0, 100) + '...';
                    // 更新元素的文本内容
                    $(this).text(shortContent);
                }
            });
        });
    </script>


    <div class="about_bg3">
        <div class="aboutL" style="margin-bottom: 10px;">
            <!--<span class="BtnL"></span>-->
            <div class="aboutH">
                <h3>EVEVT LIST</h3>
                <h2>活动展览列表</h2>
            </div>
        </div>
        <div class="news_ul anim anim-2">
            <ul>
                <li th:each="eventExhibition:${eventExhibitions}">

                    <div class="imgs l "><a th:href="@{/m/event(id=${eventExhibition.id})}"><img th:src="${eventExhibition.url}"/></a></div>
                    <div class="news_box">
                        <div class="news_txt">
                            <a th:href="@{/m/event(id=${eventExhibition.id})}">
                                <em>[[ ${eventExhibition.name} ]]</em>
                                <div class="event-content">[[ ${eventExhibition.content} ]]</div>
                            </a>
                            <div>
                                举办单位： <a th:href="@{/m/depart(id=${eventExhibition.did})}" target="_blank"
                                             style="margin-right: 10px;color: #b68036;width: auto;display: inline;">[[
                                ${ eventExhibition.departName } ]]</a>
                            </div>
                            <div>参展艺术家：<a th:each="artist,state:${eventExhibition.list}"
                                               th:if="${state.index <20 }" th:href="@{/artist(id=${artist.id})}"
                                               target="_blank"
                                               style="margin-right: 10px;color: #b68036;width: auto;display: inline;">[[
                                ${ artist.name } ]]</a>
                                <span th:if="${eventExhibition.list.size() >19}">等多位艺术家</span>
                            </div>
                            <a th:href="@{/m/event(id=${eventExhibition.id})}">
                                <div>活动地址： [[ ${eventExhibition.address} ]]</div>
                                <div>活动时间： [[ ${#temporals.format(eventExhibition.startTime, 'yyyy-MM-dd')} ]] 至 [[
                                    ${#temporals.format(eventExhibition.endTime, 'yyyy-MM-dd')} ]]
                                </div>
                                <label>查看详情</label>
                            </a>
                        </div>
                    </div>

                </li>

            </ul>
        </div>
        <div class="pages anim anim-3 yema">
            <div>
                <a class="next" th:href="@{/m/index/event/list(currentPage=${currentPage - 1})}" th:if="${currentPage != 1}">
                    &lt;&lt;
                </a>
                <div th:each="page:${pages}" style="display: inline;">
                    <span class="current" th:text="${page}" th:if="${currentPage == page}">1</span>
                    <a class="num" th:href="@{/m/index/event/list(currentPage=${page})}" th:if="${currentPage != page}" th:text="${page}"></a>
                </div>
                <a class="next" th:href="@{/m/index/event/list(currentPage=${currentPage + 1})}" th:if="${currentPage != totalPages}">
                    &gt;&gt;
                </a>
            </div>
        </div>
    </div>


</div>

<!--/main-->

<!--/main-->

<!--footer-->
<div th:replace="~{mobile/component/footer :: footer}"></div>
<!--/footer-->

<!--wap-->
<div th:replace="~{mobile/component/footer :: footer_menu}"></div>
<!--/wap-->

<div class="wapBg"></div>
</body>
<script type="text/javascript">
    $('.slider1').bxSlider({
        'auto': true,
        'controls': true,
        'touchEnabled': true,
        'pager': true,
        'speed': 1000,
        'pause': 4000,

    })

    $('.sliderHomeSpT').bxSlider({
        'auto': false,
        'controls': true,
        'touchEnabled': true,
        'pager': true,

    })

    var lineW = $(".lineW span").width();
    $('.sliderHomeSpB').bxSlider({
        'auto': false,
        infiniteLoop: true,
        'controls': true,
        'touchEnabled': true,
        'pager': true,
        'slideWidth': '204',
        'minSlides': 2,
        'maxSlides': 5,
        'moveSlides': 5,
        onSlideAfter: function ($slideElement, oldIndex, newIndex) {
            var num = $(".homeSpBW .bx-pager .bx-pager-item").length;
            var lineWW = $(".lineW").width();


            if (newIndex == 0) {
                $(".lineW span").css({
                    "width": lineW + 'px'
                })
            } else {
                $(".lineW span").css({
                    "width": (lineWW / num) * (newIndex + 1) + 'px'
                })
            }

        },


    })

    $('.sliderHomeDzzc').bxSlider({
        'auto': true,
        'controls': true,
        'touchEnabled': true,
        'pager': false,
        'slideWidth': '280',
        'minSlides': 2,
        'maxSlides': 4,
        'moveSlides': 1,
        'speed': 600,
        //	    'slideMargin': 20
    })





</script>

</html>
